<template>
	<view class="i-orderItem" :class="{border}" :style="{padding, justifyContent: align}">
		<view class="item_left" :style="leftStyle">{{title}}</view>
		<view v-if="content" :style="cStyle" :class="{textAlign, item_right: !textAlign}">{{content}}</view>
		<slot v-else></slot>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps
	} from 'vue'
	defineProps({
		title: {
			type: String,
			default: ''
		},
		cStyle: {
			type: [String, Object],
			default: ''
		},
		leftStyle: {
			type: [String, Object],
			default: ''
		},
		content: {
			type: String,
			default: ''
		},
		border: {
			type: Boolean,
			default: true
		},
		cColor: {
			type: String,
			default: '#2C2C2E'
		},
		padding: {
			type: String,
			default: '20rpx 0'
		},
		align: {
			type: String,
			default: 'space-between'
		},
		textAlign: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	.i-orderItem {
		width: 100%;
		display: flex;
		align-items: center;
		@include dfont;

		.item_left {
			color: $content-color;
			white-space: nowrap;
		}

		.item_right {
			max-width: 75%;
			@include warp;
		}

		.textAlign {
			width: 75%;
			@include warp;
		}
	}

	.border {
		border-bottom: 1rpx solid $backColor;
	}
</style>